import { login, getUserInfo, getUserDetailById } from '@/api/user'
import { getToken, removeToken, setToken } from '@/utils/auth'
import { resetRouter } from '@/router/index'

export default {
  namespaced: true,
  state: {
    userInfo: {},
    token: getToken() || '' // 这里因为是初始值为空 舒心的时候所哟普的代码重置 token为空
  },
  mutations: {
    // 存入token的方法
    setToken(state, tokenValue) {
      // 存入token
      state.token = tokenValue
      // 利用封装好的语法将获取到的token存入cookie中
      setToken(tokenValue)
    },
    // 存入用户数据的方法
    userInfo(state, userInfo) {
      state.userInfo = userInfo
    },
    // 清空用户数据的方法（退出登录时调用）
    removeUserInfo(state) {
      state.token = ''
      state.userInfo = {}
      // 清空本地token
      removeToken()
      // 清空路由记录
      resetRouter()
    }
  },
  actions: {
    // 登录的请求
    async fetchLogin({ commit }, form) {
      // ctx.commit 提交mutation
      // ctx.dispatch 提交action
      // 1、调用接口请求 登录
      const res = await login(form)
      console.log(res)
      // 2、拿到请求返回值 提交mutation函数进行修改
      commit('setToken', res)
    },
    // 获取用户资料的请求
    async fetchGetUserInfo({ commit }) {
      // 问题：
      // a、后端多个接口对应前端的一个业务 组合数据
      // b、接口之间有前后的依赖关系 await可以保证串行的结构
      // 1、发请求
      const res = await getUserInfo()
      // 插入一个头像信息请求
      const res_ = await getUserDetailById(res.userId)
      // 2、调用mutation（合并两个接口的返回对象 成为一个）
      commit('userInfo', { ...res, ...res_ })
      // 当我们想要另外一个模块中使用 action函数内部的数据时
      // 应该把这个数据 return出去
      return res
    }
  }
}

// 使用vuex管理数据的时候 从数据的定义到同步到异步都放到vuex中
// 组件只做一件事情, 调用action传递参数
